﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./js/jquery.min.js" charset="utf-8"></script>
    <style type="text/css">
        .divChild {
            width:35px;
            height:35px;
            padding: 0 5px;
            background-color:forestgreen;
            color:black;
            float:left;
            margin-left:5px;
        }
    </style>

</head>
<body>
    <input type="text" id="inputNums" value="1,4,3,5,6,2,8" /> <button onclick="startInfo()">开始展示</button>
    <div id="divShow" style="margin-top:20px;">

    </div>
    <script type="text/javascript">
        function startInfo() {
            $("#divShow").html("");
            let numArr = $("#inputNums").val().split(",");
            debugger;
            let arr = [];
            for (var i = 0; i < numArr.length; i++) {
                let num = parseInt(numArr[i])
                arr.push(num);
                $("#divShow").append("<div class='divChild'>" + num + "<div>");
            }

            
            //for (i = 0; i < arr.length - 1; i++) {
            //    for (j = 0; j < arr.length - i - 1; j++) {
            //        if (arr[j] > arr[j + 1]) {
            //            let tmp = arr[j];
            //            arr[j] = arr[j + 1];
            //            arr[j + 1] = tmp;
            //        }
            //    }
            //}
            
            for (i = 0; i < arr.length - 1; i++) {
                for (j = 0; j < arr.length - i - 1; j++) {
                    if (arr[j] > arr[j + 1]) {
                        debugger;
                        $("#divShow div").eq(j);
                        let tmp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = tmp;
                    }
                }
            }

            debugger;
        }
    </script>
</body>
</html>
